<template>
	<view >
		<uni-nav-bar
			shadow
			fixed
			color="#fff"
			statusBar
			background-color="#0081ff" 
			title="我的审核"
		/>
		<u-sticky bgColor="#fff" >
			<view style="padding:10px;background-color: #f1f1f1;">
				<u-search placeholder="流程名称" bgColor="#fff" :showAction="false" @clickIcon="search" @search="search" @clear="search" v-model="processDefinitionName"></u-search>
				<u-tabs 
					:list="items" 
					:current="current" 
					:scrollable="true" 
					@click="onClickTab"
					lineWidth="30"
					:activeStyle="{
						 color: '#303133',
						 fontWeight: 'bold',
						 transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						 color: '#606266',
						 transform: 'scale(1)'
					}"
				>
				</u-tabs>
			</view>
		</u-sticky>
		<view class="content">
			<myPendingTask v-if="current == 0" :processDefinitionName="processDefinitionName" @click="handlePending" ref="productionList" />
			<myFinishedTask v-else :processDefinitionName="processDefinitionName" @click="handleFinished" ref="productionList" />
		</view>
	</view>
</template>

<script>
	import myPendingTask from './modules/myPendingTask'
	import myFinishedTask from './modules/myFinishedTask'
	import { mapActions } from 'vuex'
	export default {
		mixins:[],
		components:{ myPendingTask,myFinishedTask },
		data() {
			return {
				current:0,
				items: [
					{ name:'待办任务' },
					{ name:'审批记录' }
				],
				processDefinitionName:''
			}
		},
		computed: {
		  windowHeight() {
		    return uni.getSystemInfoSync().windowHeight - 50
		  }
		},
		methods: {
			...mapActions('message', ['loadFlow']),
			onClickTab(e){
				this.current = e.index
				this.search()
			},
			search(){
				setTimeout(() => {
					this.$refs.productionList && this.$refs.productionList.onSearch()
				},100)
			},
			handlePending(row){
				this.$Router.push({
					path:'/pages/flow/taskForm',
					query:{
						id:row.id,
						processInstanceId:row.processInstanceId,
						type:row.taskType === 'active'?'handling':'claim'
					}
				})
			},
			handleFinished(row){
				this.$Router.push({
					path:'/pages/flow/taskForm',
					query:{
						id:row.id,
						processInstanceId:row.processInstanceId,
						disabled:true
					}
				})
			}
		},
		onShow(){
			this.search()
		},
		mounted(){
			this.search()
		},
		onReachBottom() {
			this.$refs.productionList && this.$refs.productionList.loadMore()
		},
		onHide() {
			// this.loadFlow()
		},
		onPullDownRefresh(){
			this.search()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			},500)
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
</style>
